<template>
	<view class="settings-container">
		<!-- 顶部标题栏 -->
		<view class="settings-header">
			<view class="header-content">
				<view class="back-btn" @click="goBack">
					<text class="iconfont icon-fanhui" v-if="hasIconFont"></text>
					<text class="fallback-arrow" v-else>←</text>
				</view>
				<text class="title">设置</text>
			</view>
		</view>

		<!-- 个人信息卡片 -->
		<view class="user-info-card">
			<view class="card-content">
				<!-- 头像容器：点击触发选择图片 -->
				<view class="avatar-container" @click="openUserInfoPopup">
					<image class="avatar" :src="userAvatar" mode="aspectFill"></image>
					<view class="edit-icon">
						<text class="iconfont icon-bianji"></text>
					</view>
				</view>
				<!-- 昵称容器：点击空白处（非头像）触发昵称编辑 -->
				<view class="user-info">
					<view class="username-container">
						<!-- 昵称显示：为空时用默认 “用户 + ID” -->
						<text class="username" @click="openNickNamePopup">
							{{ userName ? userName : `用户${userId}` }}
						</text>
						<text class="iconfont icon-arrowright"></text>
					</view>
				</view>
			</view>
		</view>

		<!-- 设置项列表 -->
		<view class="settings-group">
			<view class="group-card">
				<view class="setting-item" @click="openThemePopup">
					<view class="item-content">
						<view class="icon-wrap bg-blue">
							<image src="/static/icon_settings/theme.png" mode="widthFix" class="form-icon"></image>
						</view>
						<text class="item-title">主题皮肤</text>
					</view>
					<view class="item-action">
						<text class="current-theme">{{ currentThemeName }}</text>
						<text class="iconfont icon-arrowright"></text>
					</view>
				</view>
			</view>
		</view>
		<!-- 新增的五个功能栏 -->
		<view class="settings-group">
			<view class="group-card">
				<view class="setting-item" @click="showComingSoon">
					<view class="item-content">
						<view class="icon-wrap bg-gray">
							<image src="/static/icon_settings/permission.png" mode="widthFix" class="form-icon"></image>
							<text class="iconfont icon-quanxian"></text> <!-- 假设有权限管理的图标，需替换实际 iconfont 类名 -->
						</view>

						<text class="item-title">权限管理</text>
					</view>
					<text class="iconfont icon-arrowright"></text>
				</view>
				<view class="divider"></view>
				<view class="setting-item" @click="showComingSoon">
					<view class="item-content">
						<view class="icon-wrap bg-gray">
							<image src="/static/icon_settings/expand.png" mode="widthFix" class="form-icon"></image>
							<text class="iconfont icon-chajian"></text> <!-- 假设插件的图标，需替换实际 iconfont 类名 -->
						</view>
						<text class="item-title">插件</text>
					</view>
					<text class="iconfont icon-arrowright"></text>
				</view>
				<view class="divider"></view>
				<view class="setting-item" @click="showComingSoon">
					<view class="item-content">
						<view class="icon-wrap bg-gray">
							<image src="/static/icon_settings/about.png" mode="widthFix" class="form-icon"></image>
							<text class="iconfont icon-guanyu"></text> <!-- 假设关于ByteBrigade的图标，需替换实际 iconfont 类名 -->
						</view>
						<text class="item-title">关于ByteBrigade</text>
					</view>
					<text class="iconfont icon-arrowright"></text>
				</view>
				<view class="divider"></view>
				<view class="setting-item" @click="showComingSoon">
					<view class="item-content">
						<view class="icon-wrap bg-gray">
							<image src="/static/icon_settings/helpcenter.png" mode="widthFix" class="form-icon"></image>

							<text class="iconfont icon-bangzhu"></text> <!-- 假设帮助与反馈的图标，需替换实际 iconfont 类名 -->
						</view>
						<text class="item-title">帮助与反馈</text>
					</view>
					<text class="iconfont icon-arrowright"></text>
				</view>
				<view class="divider"></view>
				<view class="setting-item" @click="showComingSoon">
					<view class="item-content">
						<view class="icon-wrap bg-gray">
							<image src="/static/icon_settings/language.png" mode="widthFix" class="form-icon"></image>
							<text class="iconfont icon-yuyan"></text> <!-- 假设语言选择的图标，需替换实际 iconfont 类名 -->
						</view>
						<text class="item-title">语言选择</text>
					</view>
					<text class="iconfont icon-arrowright"></text>
				</view>
			</view>
		</view>
		<view class="settings-group">
			<view class="group-card">
				<view class="setting-item" @click="handleSwitchAccount">
					<view class="item-content">
						<view class="icon-wrap bg-green">
							<text class="iconfont icon-zhanghao"></text>
							<image src="/static/icon_settings/switch.png" mode="widthFix" class="form-icon"></image>
						</view>
						<text class="item-title">切换账号</text>
					</view>
					<text class="iconfont icon-arrowright"></text>
				</view>

				<view class="divider"></view>

				<view class="setting-item logout" @click="handleLogout">
					<view class="item-content">
						<view class="icon-wrap bg-red">
							<text class="iconfont icon-tuichu"></text>
							<image src="/static/icon_settings/logout.png" mode="widthFix" class="form-icon"></image>
						</view>
						<text class="item-title">退出登录</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 主题选择弹窗 -->
		<uni-popup ref="themePopup" type="bottom" :is-mask-click="true">
			<view class="theme-picker">
				<view class="picker-header">
					<text class="picker-title">选择主题</text>
					<view class="close-btn" @click="closeThemePopup">
						<text class="iconfont icon-close"></text>
					</view>
				</view>
				<view class="theme-grid">
					<view v-for="(theme, index) in themeOptions" :key="index" class="theme-card"
						:class="{ active: currentTheme === theme.value }" @click="changeTheme(theme.value)">
						<view class="color-display" :style="{ background: theme.vars['--primary-color'] }">
							<view class="color-sample" :style="{ background: theme.vars['--bg-color'] }"></view>
						</view>
						<text class="theme-name">{{ theme.name }}</text>
						<view v-if="currentTheme === theme.value" class="check-mark">
							<text class="iconfont icon-check"></text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="nickNamePopup" type="center" :is-mask-click="true">
			<view class="nickname-popup">
				<view class="popup-header">
					<text class="popup-title">设置昵称</text>
					<view class="close-btn" @click="cancelNickName">
						<text class="iconfont icon-close"></text>
					</view>
				</view>
				<view class="popup-content">
					<input type="text" placeholder="请输入昵称" :value="tempNickName"
						@input="e => tempNickName = e.detail.value" class="nickname-input" />
				</view>
				<view class="popup-footer">
					<button class="cancel-btn" @click="cancelNickName">取消</button>
					<button class="confirm-btn" @click="confirmNickName">确认</button>
				</view>
			</view>
		</uni-popup>

		<!-- 版本信息 -->
		<view class="version-info">
			<!-- <image class="logo" src="@/components/zhq-login/images/logo.png" mode="aspectFit"></image> -->
			<text>课表助手 v1.2.3</text>
		</view>
	</view>
</template>

<script setup>
	import {
		themeOptions,
		applyTheme,
		getCurrentTheme
	} from '@/utils/theme';
	import {
		ref,
		computed,
		onMounted
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
	import {
		getNickNameAPI,
		updateNickNameAPI
	} from '@/utils/request.js';
	import {
		request
	} from '@/utils/request.js';
	import {
		uploadAvatarAPI
	} from '@/utils/request.js';

	// 定义所有 ref 变量
	const userAvatar = ref('/static/default-avatar.png');
	const userName = ref('');
	const userId = uni.getStorageSync('userID') || 'default';
	const isLoadingAvatar = ref(false); // 确保在使用前定义
	const nickNamePopup = ref(false);
	const tempNickName = ref('');
	const themePopup = ref(null);


	const currentTheme = ref('default')

	// 计算当前主题名称
	const currentThemeName = computed(() => {
		return themeOptions.value.find(t => t.value === currentTheme.value)?.name || '默认蓝'
	})
	onMounted(async () => {
		try {
			console.log('尝试获取用户昵称，userID:', userId); // 调试用
			const response = await getNickNameAPI(userId);
			console.log('获取昵称结果:', response); // 调试用

			if (response.code === 200) {
				userName.value = response.data.userName || `用户${userId}`;
			} else {
				userName.value = `用户${userId}`;
			}
		} catch (error) {
			console.error('获取昵称失败:', error);
			userName.value = `用户${userId}`;
		}
		await fetchUserAvatar();
	});
	async function fetchUserAvatar() {
		isLoadingAvatar.value = true;
		try {
			// 假设后端接口：GET /user/{userId}/avatar
			const response = await request(`/user/${userId}/avatar/url`, 'GET');
			if (response.code === 200) {
				userAvatar.value = globalThis.BASE_API + "/avatars/" + userId + ".png";
			} else {
				// 后端无头像时显示默认头像
				userAvatar.value = '/static/default-avatar.png';
			}
		} catch (error) {
			// 网络错误或接口异常时显示默认头像
			userAvatar.value = '/static/default-avatar.png';
			throw error;
		} finally {
			isLoadingAvatar.value = false;
		}
	}

	// 打开用户信息弹窗（选择或上传头像）
	function openUserInfoPopup() {
		// 先检查是否已获取后端头像
		if (userAvatar.value && userAvatar.value.startsWith('avatars')) {
			// 后端已有头像，提示是否更换
			uni.showModal({
				title: '更换头像',
				content: '是否从相册选择新头像？',
				success: (res) => {
					if (res.confirm) {
						chooseAndUploadAvatar();
					}
				}
			});
		} else {
			// 后端无头像，直接打开相册选择
			chooseAndUploadAvatar();
		}
	}

	// 选择头像并上传到后端
	async function chooseAndUploadAvatar() {
		uni.chooseImage({
			count: 1,
			sizeType: ['compressed'],
			sourceType: ['album', 'camera'],
			success: async (res) => {
				const tempFilePath = res.tempFilePaths[0];
				try {
					uni.showLoading({
						title: '上传头像中...'
					});
					const userId = uni.getStorageSync('userID');
					const response = await uploadAvatarAPI(userId, {
						uri: tempFilePath
					});
					if (response.code === 200) {
						userAvatar.value = response.data.avatarUrl;
						uni.showToast({
							title: '头像更新成功',
							icon: 'success'
						});

						// 刷新页面的方法
						setTimeout(() => {
							// 方法1：使用uni-app的API（推荐）
							window.location.reload();

							// 方法2：使用原生JS（如果上述方法不适用）
							// window.location.reload();
						}, 1000); // 延迟1秒执行，确保用户能看到成功提示
					} else {
						uni.showToast({
							title: '头像上传失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('头像上传失败', error);
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
				}
			},
			fail: (err) => {
				console.error('选择头像失败', err);
				uni.showToast({
					title: '选择头像失败',
					icon: 'none'
				});
			}
		});
	}
	// 点击昵称区域空白处 - 打开编辑弹窗
	function openNickNamePopup() {
		tempNickName.value = userName.value
		nickNamePopup.value.open('center') // 推荐方式
	}
	async function confirmNickName() {
		try {
			console.log('传递给后端的参数:', {
				userId,
				nickName: tempNickName.value
			})
			const response = await updateNickNameAPI(userId, tempNickName.value)

			if (response.code === 200) {
				// 更新成功后，根据实际保存的值更新显示（防止后端处理为空）
				userName.value = response.data.userName || `用户${userId}`
				nickNamePopup.value.close()
				uni.showToast({
					title: '昵称修改成功',
					icon: 'success'
				})
			} else {
				uni.showToast({
					title: '昵称修改失败',
					icon: 'none'
				})
			}
		} catch (error) {
			console.error('修改昵称失败:', error)
			uni.showToast({
				title: '昵称修改失败，请重试',
				icon: 'none'
			})
		}
	}

	function cancelNickName() {
		nickNamePopup.value.close()
	}
	// 打开主题弹窗
	function openThemePopup() {
		themePopup.value?.open()
	}

	// 关闭主题弹窗
	function closeThemePopup() {
		themePopup.value?.close()
	}

	function changeTheme(themeValue) {
		applyTheme(themeValue) // 调用统一方法
		currentTheme.value = themeValue
		closeThemePopup()
	}
	

	// 切换账号
	function handleSwitchAccount() {
		uni.showModal({
			title: '切换账号',
			content: '确定要切换账号吗？当前进度将被保存',
			confirmText: '切换',
			success: (res) => {
				if (res.confirm) {
					uni.navigateTo({
						url: '/pages/index/login'
					})
				}
			}
		})
	}

	// 退出登录
	function handleLogout() {
		uni.showModal({
			title: '退出登录',
			content: '确定要退出当前账号吗？登录状态将被清除',
			confirmColor: '#FF3B30',
			success: (res) => {
				if (res.confirm) {
					uni.reLaunch({
						url: '/pages/index/login'
					})
				}
			}
		})
	}

	// 返回
	function goBack() {
		uni.switchTab({
			url: '/pages/index/table'
		})
	}

	function showComingSoon() {
		uni.showToast({
			title: '该功能即将上线',
			icon: 'none',
			duration: 1500
		})
	}
	// 初始化主题
	onMounted(() => {
		// 新增：优先读取本地存储的主题
		currentTheme.value = getCurrentTheme() // 初始化显示当前主题名
		const savedTheme = uni.getStorageSync('selectedTheme') || 'default'
		currentTheme.value = savedTheme

		// 应用存储的主题（或默认）
		const initialTheme = themeOptions.value.find(t => t.value === savedTheme)
		if (initialTheme) {
			const doc = document.documentElement
			for (const [varName, varValue] of Object.entries(initialTheme.vars)) {
				doc.style.setProperty(varName, varValue)
			}
		}


	})
</script>

<style lang="scss">
	/* 全局变量 */
	:root {
		--primary-color: #90a3ba;
		--primary-color-dark: #6D7F83;
		--bg-color: #F0F1F2;
		--text-color: #4A4A4A;
		--sub-text-color: #7D7D7D;
		--border-color: #D8D8D8;
		--card-bg: #FFFFFF;
		--card-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	.settings-container {
		background-color: var(--bg-color);
		min-height: 100vh;
		padding: 20rpx;
	}

	/* 顶部标题栏 - 优化后的样式 */
	.settings-header {
		background: linear-gradient(135deg, var(--primary-color), var(--primary-color-dark));
		padding: 60rpx 0 40rpx;
		margin: -20rpx -20rpx 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		position: relative;
		z-index: 10;

		.header-content {
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			position: relative;
			height: 60rpx;

			/* 顶部标题栏 - 优化后的样式 */
			.settings-header {
				.header-content {
					.back-btn {
						position: absolute;
						left: 30rpx;
						top: 50%;
						transform: translateY(-50%);
						width: 60rpx;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						z-index: 2;

						.iconfont,
						.fallback-arrow {
							font-size: 40rpx;
							color: #ffffff !important;
							text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
						}

						&:active .iconfont,
						&:active .fallback-arrow {
							opacity: 0.8;
							transform: scale(0.95);
						}
					}
				}
			}

			.fallback-arrow {
				font-weight: bold;
				transform: translateY(-2rpx);
				color: var(--sub-text-color);
			}

			.title {
				flex: 1;
				text-align: center;
				font-size: 38rpx;
				font-weight: 600;
				color: white;
				text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
				position: relative;
				z-index: 1;
			}
		}
	}

	/* 用户信息卡片 */
	.user-info-card {
		margin-bottom: 20px;
		position: relative;
		z-index: 20;

		.card-content {
			background: var(--card-bg);
			border-radius: 20rpx;
			padding: 30rpx;
			box-shadow: var(--card-shadow);
			display: flex;
			align-items: center;
			transition: all 0.3s ease;

			&:active {
				transform: translateY(4rpx);
				box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.1);
			}

			.avatar {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				border: 4rpx solid rgba(255, 255, 255, 0.8);
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
			}

			.user-info {
				margin-left: 25rpx;

				.username {
					font-size: 36rpx;
					font-weight: 500;
					color: var(--text-color);
					line-height: 1.4;
				}

				.user-id {
					font-size: 26rpx;
					color: var(--sub-text-color);
					opacity: 0.8;
				}
			}
		}
	}

	/* 设置项分组 */
	.settings-group {
		margin-bottom: 30rpx;

		.group-card {
			background: var(--card-bg);
			border-radius: 20rpx;
			overflow: hidden;
			box-shadow: var(--card-shadow);
			transition: all 0.3s ease;

			&:active {
				transform: translateY(2rpx);
			}

			.divider {
				height: 1rpx;
				background: var(--border-color);
				margin: 0 25rpx;
			}

			.setting-item {
				padding: 32rpx 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.item-content {
					display: flex;
					align-items: center;

					.icon-wrap {
						width: 50rpx;
						height: 50rpx;
						border-radius: 14rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 20rpx;


						.iconfont {
							font-size: 28rpx;
						}
					}

					.item-title {
						font-size: 32rpx;
						color: var(--text-color);
						font-weight: 500;
					}
				}

				.item-action {
					display: flex;
					align-items: center;

					.current-theme {
						font-size: 28rpx;
						color: var(--sub-text-color);
						margin-right: 15rpx;
					}

					.iconfont {
						font-size: 26rpx;
						color: #ccc;
					}
				}

				&.logout {
					.iconfont {
						color: #ab5852;
					}

					.item-title {
						color: #c55b51;
					}
				}
			}
		}
	}

	/* 主题选择弹窗 */
	.theme-picker {
		background: var(--card-bg);
		border-radius: 30rpx 30rpx 0 0;
		padding: 40rpx 30rpx;
		padding-bottom: calc(40rpx + env(safe-area-inset-bottom));

		.picker-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 40rpx;

			.picker-title {
				font-size: 36rpx;
				font-weight: 600;
				color: var(--text-color);
			}

			.close-btn {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				background: rgba(0, 0, 0, 0.05);
				display: flex;
				align-items: center;
				justify-content: center;

				.iconfont {
					font-size: 26rpx;
					color: var(--sub-text-color);
				}
			}
		}

		.theme-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 25rpx;

			.theme-card {
				background: var(--card-bg);
				border-radius: 18rpx;
				padding: 25rpx;
				box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.05);
				position: relative;
				overflow: hidden;
				transition: all 0.3s ease;

				&:active {
					transform: scale(0.97);
				}

				&.active {
					box-shadow: 0 0 0 3rpx var(--primary-color);
				}

				.color-display {
					height: 100rpx;
					border-radius: 12rpx;
					margin-bottom: 20rpx;
					position: relative;
					overflow: hidden;

					.color-sample {
						position: absolute;
						bottom: 0;
						left: 0;
						right: 0;
						height: 40rpx;
						border-radius: 0 0 12rpx 12rpx;
					}
				}

				.theme-name {
					font-size: 28rpx;
					color: var(--text-color);
					text-align: center;
					display: block;
				}

				.check-mark {
					position: absolute;
					top: 15rpx;
					right: 15rpx;
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
					background: var(--primary-color);
					display: flex;
					align-items: center;
					justify-content: center;

					.iconfont {
						font-size: 20rpx;
						color: white;
					}
				}
			}
		}
	}

	/* 版本信息 */
	.version-info {
		text-align: center;
		margin-top: 50rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.logo {
			width: 80rpx;
			height: 80rpx;
			margin-bottom: 15rpx;
			opacity: 0.8;
		}

		text {
			font-size: 26rpx;
			color: var(--sub-text-color);
			opacity: 0.7;
		}
	}

	/* 昵称编辑弹窗 */
	/* 昵称编辑弹窗 - 优化版 */
	.nickname-popup {
		background: var(--card-bg);
		/* 增大圆角 */
		border-radius: 40rpx;
		/* 改用 max-width 限制宽度，左右自动留白 */
		max-width: 580rpx;
		width: 85%;
		padding: 50rpx 40rpx;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.2);
		border: 1rpx solid rgba(255, 255, 255, 0.15);
		position: relative;
		overflow: hidden;



		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 40rpx;
			position: relative;

			.popup-title {
				font-size: 40rpx;
				font-weight: 700;
				color: var(--text-color);
				letter-spacing: 0.5rpx;
				position: relative;
				padding-left: 20rpx;

				&::before {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 6rpx;
					height: 30rpx;
					background: var(--primary-color);
					border-radius: 3rpx;
				}
			}

			.close-btn {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				background: rgba(0, 0, 0, 0.05);
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);

				&:active {
					transform: scale(0.9) rotate(90deg);
					background: rgba(0, 0, 0, 1);
				}

				.iconfont {
					font-size: 32rpx;
					color: var(--sub-text-color);
					transition: all 0.2s ease;
				}
			}
		}

		.popup-content {
			margin-bottom: 50rpx;

			.nickname-input {
				/* 缩短输入框长度，配合弹窗宽度调整 */
				width: 90%;
				height: 100rpx;
				line-height: 100rpx;
				border: 2rpx solid var(--border-color);
				/* 增大输入框圆角 */
				border-radius: 20rpx;
				padding: 0 30rpx;
				font-size: 32rpx;
				color: var(--text-color);
				transition: all 0.3s ease;
				background: var(--input-bg, rgba(0, 0, 0, 0.02));
				box-shadow: inset 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

				&:focus {
					border-color: var(--primary-color);
					box-shadow: inset 0 2rpx 8rpx rgba(0, 0, 0, 0.05),
						0 0 0 4rpx rgba(var(--primary-color-rgb), 0.15);
					background: var(--input-focus-bg, rgba(var(--primary-color-rgb), 0.03));
				}

				&::placeholder {
					color: var(--placeholder-color);
					opacity: 0.6;
					font-size: 30rpx;
					letter-spacing: 0.5rpx;
				}
			}
		}

		.popup-footer {
			display: flex;
			justify-content: space-between;
			/* 增大按钮之间的间隙 */
			gap: 40rpx;

			.cancel-btn,
			.confirm-btn {

				flex: 1;
				/* 缩小按钮内边距，让按钮变小 */
				padding: 20rpx;
				border-radius: 16rpx;
				/* 可根据需要进一步缩小字体，让按钮更紧凑 
    font-size: 28rpx; */
				font-size: 32rpx;
				font-weight: 500;
				transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
				position: relative;
				overflow: hidden;
				border: none;
				display: flex;
				align-items: center;
				justify-content: center;

				&::after {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: rgba(255, 255, 255, 0.2);
					opacity: 0;
					transition: opacity 0.3s ease;
				}

				&:active::after {
					opacity: 1;
				}
			}

			.cancel-btn {
				background: var(--cancel-btn-bg, rgba(0, 0, 0, 0.05));
				color: var(--sub-text-color);
				box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

				&:active {
					transform: translateY(4rpx);
					box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
				}
			}

			.confirm-btn {
				background: var(--primary-color-dark);
				color: #fff;
				box-shadow: 0 6rpx 16rpx rgba(var(--primary-color-rgb), 0.3);

				&:active {
					transform: translateY(4rpx);
					box-shadow: 0 3rpx 8rpx rgba(var(--primary-color-rgb), 0.3);
				}

				&:disabled {
					background: var(--disabled-color, #CCCCCC);
					box-shadow: none;
					transform: none;
				}

				&::before {
					content: '';
					position: absolute;
					top: 50%;
					left: 50%;
					width: 5px;
					height: 5px;
					background: rgba(255, 255, 255, 0.5);
					opacity: 0;
					border-radius: 100%;
					transform: scale(1, 1) translate(-50%, -50%);
					transform-origin: 50% 50%;
				}

				&:focus:not(:active)::before {
					animation: ripple 0.6s ease-out;
				}
			}
		}
	}

	@keyframes ripple {
		0% {
			transform: scale(0, 0);
			opacity: 0.5;
		}

		100% {
			transform: scale(20, 20);
			opacity: 0;
		}
	}

	/* 安全区域适配 */
	@supports (padding-bottom: env(safe-area-inset-bottom)) {
		.settings-container {
			padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		}
	}
</style>